<template>
  <div>
    <component :tabList="initSetting" :is="getOutlineComponent" :info="props.info"></component>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import style1 from './style/style1.vue';
import style2 from './style/style2.vue';
import style3 from './style/style3.vue';
import style4 from './style/style4.vue';
import style5 from './style/style5.vue';
import style6 from './style/style6.vue';
import style7 from './style/style7.vue';
import style8 from './style/style8.vue';
import style9 from './style/style9.vue';
import style11 from './style/style11.vue';

import style10 from './style/style10.vue';
import style12 from './style/style12.vue';
import style13 from './style/style13.vue';
import style14 from './style/style14.vue';
import style15 from './style/style15.vue';
import style16 from './style/style16.vue';
import style17 from './style/style17.vue';
import { urls } from '@/utils/request/upload';
import { commonDataStore } from '@/store';
import { storeToRefs } from 'pinia';
import { useProjectStore } from '@/store';
const store = useProjectStore();
const commonStore = commonDataStore();
const { tabvalue } = storeToRefs(store);
const { menuList } = storeToRefs(commonStore);
// commonStore.getMenuList();
const props = defineProps({
  info: {
    type: Object,
  },
});
// console.log(commonStore.menuList, '获取列表');
const tabList = ref([
  { name: '展览首页', isShow: true, id: 0, link: 'templateedit', linkLoop: 'exhibitionHome' },
  { name: '展品图库', isShow: true, id: 1, link: 'templateExhibit', linkLoop: 'templateExhibitLoop' },
  { name: '文创商品', isShow: true, id: 4, link: 'templateCultural', linkLoop: 'templateCulturalLoop' },
  { name: '版权声明', isShow: true, id: 5, link: 'templateCopyright', linkLoop: 'templateCopyrightLoop' },
  { name: '学术研究', isShow: true, id: 3, link: 'templateResearches', linkLoop: 'templateResearchesLoop' },
  { name: '留言板', isShow: true, id: 2, link: 'templateMessage', linkLoop: 'templateMessageLoop' },
  { name: '策展团队', isShow: true, id: 6, link: 'templateTeam', linkLoop: 'templateTeamLoop' },
]);
const initSetting = computed(() => {
  try {
    let arr = [
      { name: '展览首页', isShow: true, id: 0, link: 'templateedit', linkLoop: 'exhibitionHome' },
      { name: '展品图库', isShow: true, id: 1, link: 'templateExhibit', linkLoop: 'templateExhibitLoop' },
      { name: '文创商品', isShow: true, id: 4, link: 'templateCultural', linkLoop: 'templateCulturalLoop' },
      { name: '版权声明', isShow: true, id: 5, link: 'templateCopyright', linkLoop: 'templateCopyrightLoop' },
      { name: '学术研究', isShow: true, id: 3, link: 'templateResearches', linkLoop: 'templateResearchesLoop' },
      { name: '留言板', isShow: true, id: 2, link: 'templateMessage', linkLoop: 'templateMessageLoop' },
      { name: '策展团队', isShow: true, id: 6, link: 'templateTeam', linkLoop: 'templateTeamLoop' },
    ];
    commonStore.menuList.forEach((element) => {
      if (!element.config) {
        switch (element.type) {
          case 2:
            tabList.value[5].isShow = false;
            break;
          case 3:
            tabList.value[4].isShow = false;
            break;
          case 4:
            tabList.value[2].isShow = false;
            break;
          case 6:
            tabList.value[6].isShow = false;
            break;
        }
      }
    });
    return arr;
    // console.log(tabList.value);
  } catch {}
});
// initSetting();

const getOutlineComponent = computed(() => {
  let component: Object;
  switch (commonStore.templateId) {
    case 546821049266245:
      component = style1;
      break;
    case 568727972499525:
      component = style2;
      break;
    case 581876609753157:
      component = style3;
      break;
    case 584041224159301:
      component = style4;
      break;
    case 594187892883525:
      component = style5;
      break;
    case 598779929522245:
      component = style6;
      break;
    case 607270742659141:
      component = style7;
      break;
    case 609108365123653:
      component = style8;
      break;
    case 618322755817541:
      component = style9;
      break;
    case 621494527193157:
      component = style10;
      break;
    case 621784378253381:
      component = style11;
      break;
    case 628149200830533:
      component = style12;
      break;
    case 643443922464837:
      component = style13;
      break;
    case 645568970317893:
      component = style14;

      break;
    case 651173498134597:
      component = style15;
      break;
    case 661088851107909:
      component = style16;
      break;
    case 688032033431621:
      component = style17;
      break;
    default:
      component = style1;
      break;
  }
  return component;
});
watch(
  () => tabvalue,
  () => {
    commonStore.getMenuList();
    // initSetting();
  },
  { deep: true },
);
watch(
  () => menuList,
  () => {
    // initSetting();
  },
  { deep: true },
);
</script>

<style scoped lang="less"></style>
